<template>
	<view class="page-wrap" :data-theme="theme" :style="globalColor.style">
		<!--index.wxml-->
		<header-custom title="我的" />
		<view class="container">
			<!--用户信息-->
			<view class="info-box">
				<!--登录-->
				<view v-if="isLogin" class="userinfo fboxRow">
					<view class="avatar" data-url="/bks/mine/user/index" catchtap="goto">
						<image :src="userInfo.avatar" mode="aspectFill"></image>
						<view v-if="userInfo.isVIP" class="vip-icon fboxRow Xcenter Ycenter">
							<text class="bksCIcon bks-c-ziyuan45V color-fff font16"></text>
						</view>
					</view>
					<view class="fboxCol Xcenter" data-url="/bks/mine/user/index" catchtap="goto">
						<view class="name font48 color-36363A">{{ userInfo.nickName }}</view>
						<view class="font32 color-9899A1">{{ userInfo.mobile }}</view>
					</view>
				</view>
				<!--未登录-->
				<view v-else class="un-userinfo fboxRow Ycenter">
					<view class="avatar fboxCol Xend" data-url="/bks/login/index/index" catchtap="goto">
						<text class="bksCIcon bks-c-ziyuan46weidenglu color-E6E6EB" style="font-size: 114rpx" />
					</view>
					<view class="text color-36363A font30" data-url="/bks/login/index/index" catchtap="goto">
						请登录
					</view>
				</view>
			</view>
			<view class="vip fboxRow Xbetween Ycenter" @click="gotoVip">
				<view class="left">
					<text class="bksCIcon bks-c-ziyuan25VIP color-FFE926"></text>
					<text class="font26 color-fff">
						<block v-if="userInfo.dueTime">
							<block v-if="userInfo.isVIP">
								VIP会员，将于{{ userInfo.dueTime }}过期
							</block>
							<block v-else>您的VIP特权已于{{ userInfo.dueTime }}过期</block>
						</block>
						<block v-else>您尚未开通VIP会员</block>
					</text>
				</view>
				<view class="right">
					<text class="font22 color-fff">
						<block v-if="userInfo.dueTime">
							<block v-if="sys.platform == 'ios'">立即开通</block>
							<block v-else>立即续费</block>
						</block>
						<block v-else>立即开通</block>
					</text>
					<text class="bksCIcon bks-c-ziyuan19right font20 color-fff"></text>
				</view>
			</view>

			<!--IMG0008-->
			<get-img className="w690 radius8 mt30" imgCode="IMG0008" />

			<!--我收藏的-->
			<view class="collect-box fboxCol Xbetween">
				<view class="title">我收藏的</view>
				<view class="list fboxRow Xbetween">
					<block v-for="(item, index) in collectList" :key="index">
						<view class="item" @click="gotoCollect(index)">
							<image :src="item.img"></image>
							<view class="name font24">{{ item.name }}</view>
						</view>
					</block>
				</view>
			</view>
			<view class="cell font28 fboxRow Ycenter" v-for="(item, index) in actionList" :key="index"
				@click="goto(item.path)">
				<view class="flex1 font32">{{item.title}}</view>
				<text class="bwfont bw-arrow-right color-ACB4C7 font26"></text>
			</view>
			<ad unit-id="adunit-2b1d806ae4e90c54"></ad>
		</view>
		<BottomTabbar type="bks" active="mine"></BottomTabbar>
	</view>
</template>

<script>
	import {
		userInfo,
		notifyTotal,
		workEdit
	} from '@/api/bks.mine';
	import BottomTabbar from '@/components/bottom-btn/bottom-tabbar.vue';
	import headerCustom from '@/pagesBKS/components/header-custom.vue';
	import GetImg from '@/pagesBKS/components/get-img.vue'

	import {
		getTokenStatus
	} from '@/static/js/common.js';
	export default {
		components: {
			BottomTabbar,
			headerCustom,
			GetImg
		},
		data() {
			return {
				sys: {},
				theme: 'bks-theme',
				globalColor: getApp().globalData.globalColor,
				isLogin: false,
				userInfo: {},
				notifyTotal: 0,
				actionList: [{
						title: '我购买的',
						path: '/bks/mine/buy/index'
					},
					{
						title: '我的成绩',
						path: '/bks/volunteer/myScore/assign/index'
					},
					{
						title: '学生认证',
						path: '/bks/mine/certification/index'
					},
					{
						title: '我的设置',
						path: '/bks/mine/setting/index'
					}
				],
				focusList: [{
						// 关注部分展示列表
						tag: 'fans',
						name: '关注我',
						num: 0
					},
					{
						tag: 'follow',
						name: '我关注',
						num: 0
					},
					{
						tag: 'consult',
						name: '我咨询',
						num: 0
					},
					{
						tag: 'answer',
						name: '我回答',
						num: 0
					}
				],
				workbenchList: [
					// 工作台部分展示列表
					{
						name: '工作时间',
						img: 'https://bks-view.obs.cn-north-4.myhuaweicloud.com:443/css/slzn.jpg'
					},
					{
						name: '咨询中心',
						img: 'https://bks-view.obs.cn-north-4.myhuaweicloud.com:443/css/wdsy.png'
					},
					{
						name: '推荐院校',
						img: 'https://bks-view.obs.myhuaweicloud.com:443/css/recommendSchool.png'
					}
				],
				collectList: [
					// 收藏部分展示列表
					{
						name: '院校',
						img: 'https://bks-view.obs.cn-north-4.myhuaweicloud.com:443/css/yuanxiao.jpg'
					},
					{
						name: '专业',
						img: 'https://bks-view.obs.cn-north-4.myhuaweicloud.com:443/css/zhuanye.jpg'
					},
					{
						name: '专题',
						img: 'https://bks-view.obs.cn-north-4.myhuaweicloud.com:443/css/zhuantiCollection.jpg'
					},
					{
						name: '资料',
						img: 'https://bks-view.obs.cn-north-4.myhuaweicloud.com:443/css/ziliao.jpg'
					}
				],
			};
		},
		onLoad() {
			this.getUserInfo();

			try {
				this.sys = uni.getSystemInfoSync();
			} catch (e) {
				//TODO handle the exception
			}
		},
		onShow() {
			// if(token){
			// 	this.getUserInfo();
			// }else{
			// 	this.isLogin = false
			// 	this.userInfo = {}
			// }
		},
		methods: {
			// 获取用户信息
			getUserInfo() {
				userInfo()
					.then((res) => {
						// app.globalData.userInfo = res.data;
						uni.setStorageSync('bw_bks_user', res.data);

						this.isLogin = true;
						this.userInfo = res.data;
						this.focusList = [{
								tag: 'fans',
								name: '关注我',
								num: res.data.followNum
							},
							{
								tag: 'follow',
								name: '我关注',
								num: res.data.myFollowNum
							},
							{
								tag: 'consult',
								name: '我咨询',
								num: res.data.myAdvisoryNum
							},
							{
								tag: 'answer',
								name: '我回答',
								num: res.data.myAnswerNum
							}
						];
					})
					.catch((e) => {
						this.isLogin = false;
					});
			},
			// 跳转
			goto(val) {
				const url = val
				if (getTokenStatus()) {
					this.$pageTo(url);
				} else {
					this.$pageTo('/bks/login/index/index');
				}
			},
			// 打开vip弹窗
			gotoVip() {
				if (getTokenStatus()) {
					try {
						const sys = uni.getSystemInfoSync()
						if (sys.platform == 'ios') {
							uni.showToast({
								title: 'ios暂不支持',
								icon: 'none'
							});
						} else {
							this.$pageTo('/bks/mine/vip/index');
						}
						this.$pageTo('/bks/mine/vip/index');
					} catch (e) {
						//TODO handle the exception
					}
				} else {
					this.$pageTo('/bks/login/index/index');
				}
			},
			gotoCollect(val) {
				if (getTokenStatus()) {
					this.$pageTo('/bks/mine/collect/index', {
						activeTab: val
					});
				} else {
					this.$pageTo('/bks/login/index/index');
				}
			}
		}
	};
</script>

<style scoped lang="scss">
	.cell {
		padding: 0 30rpx;
		height: 100rpx;
		color: var(--titleFontColor);
		border-bottom: 1rpx solid var(--backgroundDivisionColor) !important;
	}

	.cell .value {
		color: var(--contentFontLightColor)
	}

	.cell .bwfont {
		margin-left: 10rpx;
		color: var(--contentFontFiveColor)
	}

	/**index.wxss**/
	.title {
		font-weight: bold;
		font-size: 28rpx;
		color: #36363a;
	}

	.info-box {
		padding: 32rpx 44rpx 43rpx 40rpx;
	}

	.info-box .msg {
		margin-bottom: 9rpx;
		text-align: end;
	}

	.info-box .un-userinfo .avatar {
		width: 150rpx;
		height: 150rpx;
		border: 6rpx solid #e6e6eb;
		background: #f5f5fa;
		border-radius: 50%;
		text-align: center;
		margin-right: 22rpx;
	}

	.info-box .un-userinfo .avatar>text {
		position: relative;
		top: 6rpx;
	}

	.info-box .un-userinfo .text {
		font-weight: bold;
	}

	.info-box .userinfo .avatar {
		position: relative;
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		border: 6rpx solid #e6e6eb;
		margin-right: 24rpx;
	}

	.info-box .userinfo .avatar image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.info-box .userinfo .avatar .vip-icon {
		width: 38rpx;
		height: 38rpx;
		border: 2px solid #ffffff;
		background: #00c15d;
		border-radius: 50%;
		position: absolute;
		bottom: 0;
		right: 0;
	}

	.info-box .userinfo .name {
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.info-box .userinfo .right {
		position: relative;
	}

	.list {
		text-align: center;
		padding: 0 68rpx;
	}

	.list .item .num {
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.vip {
		width: 690rpx;
		height: 88rpx;
		border-radius: 12rpx;
		line-height: 88rpx;
		margin: 0 auto;
		padding: 0 30rpx;
		background-image: url('https://bks-view.obs.cn-north-4.myhuaweicloud.com/css/vip-bg.jpg');
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 100% 100%;
	}

	.vip .left text:last-child {
		margin-left: 9rpx;
	}

	.vip .right text:first-child {
		margin-right: 9rpx;
	}

	.container .u-cell__title,
	.container .u-field__label {
		font-weight: bold;
		font-size: 28rpx;
		color: #36363a;
	}

	.container .u-cell__value,
	.container .u-cell__right-icon-wrap {
		font-size: 22rpx;
	}

	.container .u-cell {
		height: 98rpx;
		display: flex;
		// align-items: center;
		// padding: 0 30rpx;
	}

	.container .u-cell:after {
		border: 0;
	}

	.workbench-box {
		height: 220rpx;
		padding: 36rpx 30rpx 0;
	}

	.workbench-box .list {
		text-align: center;
		padding: 0 9rpx;
	}

	.workbench-box .list image {
		width: 50rpx;
		height: 50rpx;
	}

	.workbench-box .list .name,
	.collect-box .list .name {
		color: #36363a;
		margin-top: 15rpx;
	}

	.collect-box {
		height: 240rpx;
		padding: 36rpx 30rpx 40rpx;
		border-bottom: 1rpx solid var(--backgroundDivisionColor) !important;
	}

	.collect-box .list {
		padding: 0 25rpx;
	}

	.collect-box .list image {
		width: 46rpx;
		height: 46rpx;
	}

	.container .btn {
		padding: 30rpx 30rpx 60rpx;
	}

	.container .btn view {
		width: 100%;
		height: 84rpx;
		border: 1px solid #e6e6eb;
		border-radius: 8rpx;
		color: #e95241;
		font-size: 30rpx;
		line-height: 84rpx;
		text-align: center;
	}
</style>